<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="组ID" prop="groupId">

        <el-select
          @keyup.enter.native="handleQuery"
          v-model="queryParams.groupId"
          clearable

          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteGroupList"
          :loading="loading">
          <el-option
            v-for="item in groupOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>


      <el-form-item label="client_id" prop="deviceClientId">
        <el-input
          v-model="queryParams.deviceClientId"
          placeholder="请输入client_id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="连接时间">
        <el-date-picker
          v-model="daterangeLastConnectionTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="设备组id" prop="groupId">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.groupId"-->
      <!--          placeholder="请输入设备组id"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->

      <el-form-item label="离线时间">
        <el-date-picker
          v-model="daterangeLastDisconnectionTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">

        <el-button size="mini"
                   plain
                   v-model="checkAll" @click="handleCheckAll">{{ checkAll ? '取消全选' : '全选' }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['emqx:devices:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['emqx:devices:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['emqx:devices:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['emqx:devices:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-s-promotion"
          size="mini"
          :disabled="multiple"
          @click="handleSendMsg"
          v-hasPermi="['emqx:devices:send']"
        >消息推送
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!--    <el-table v-loading="loading" :data="devicesList" @selection-change="handleSelectionChange">-->
    <!--      <el-table-column type="selection" width="55" align="center"/>-->
    <!--      <el-table-column label="设备Id" align="center" prop="deviceId"/>-->
    <!--      <el-table-column label="client_id" align="center" prop="deviceClientId"/>-->
    <!--      <el-table-column label="设备名" align="center" prop="deviceName"/>-->
    <!--      <el-table-column label="最后连接时间" align="center" prop="lastConnectionTime" width="180">-->
    <!--        <template slot-scope="scope">-->
    <!--          <span>{{ parseTime(scope.row.lastConnectionTime, '{y}-{m}-{d}') }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="备注" align="center" prop="remark"/>-->
    <!--      <el-table-column label="设备组id" align="center" prop="groupId"/>-->
    <!--      <el-table-column label="状态" align="center" prop="status">-->
    <!--        <template slot-scope="scope">-->
    <!--          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="最后断开连接时间" align="center" prop="lastDisconnectionTime" width="180">-->
    <!--        <template slot-scope="scope">-->
    <!--          <span>{{ parseTime(scope.row.lastDisconnectionTime, '{y}-{m}-{d}') }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button-->
    <!--            size="mini"-->
    <!--            type="text"-->
    <!--            icon="el-icon-edit"-->
    <!--            @click="handleUpdate(scope.row)"-->
    <!--            v-hasPermi="['emqx:devices:edit']"-->
    <!--          >修改-->
    <!--          </el-button>-->
    <!--          <el-button-->
    <!--            size="mini"-->
    <!--            type="text"-->
    <!--            icon="el-icon-delete"-->
    <!--            @click="handleDelete(scope.row)"-->
    <!--            v-hasPermi="['emqx:devices:remove']"-->
    <!--          >删除-->
    <!--          </el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->


    <el-checkbox-group style="font-size: medium" v-model="checked" @change="handleCheckedChange">
      <div>
        <el-row v-for="(row4, rowIndex) in groupedDevicesList()" :key="rowIndex" style="margin-top: 8px">
          <el-col style="padding-left: 8px;padding-right: 8px;"
                  v-for="(card, colIndex) in row4"
                  :key="colIndex"
                  :span="6"
          >
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">


                <el-checkbox :label="card.deviceId" :key="card.deviceId">
                <span> {{ card.deviceName }}
                   <el-tooltip v-if="card.status==='0'" class="item" effect="dark" content="设备状态正常"
                               placement="top"><i style="color: #409EFF" class="el-icon-success"/></el-tooltip>
                  <el-tooltip v-else-if="card.status==='1'" class="item" effect="dark" content="设备状态停用"
                              placement="top"><i style="color: #F56C6C" class="el-icon-warning"/></el-tooltip>
                </span>
                </el-checkbox>


                <el-button v-hasPermi="['emqx:devices:remove']" @click="handleDelete(card)"
                           style="color: #F56C6C; float: right; margin-left: 5px;margin-right: 5px; padding: 3px 0"
                           type="text">删除
                </el-button>
                <el-button v-hasPermi="['emqx:devices:edit']" @click="handleUpdate(card)"
                           style=" float: right; margin-left: 5px;margin-right: 5px; padding: 3px 0" type="text">修改
                </el-button>

              </div>
              <div class="text item">
                <el-row style="font-size: 14px; margin-top: 10px; " :gutter="24">
                  <el-col :span="12">
                    <span>组Id: {{ card.groupId }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>设备Id: {{ card.deviceId }}</span>
                  </el-col>

                </el-row>
                <el-row style="font-size: 14px; margin-top: 10px; " :gutter="24">

                  <el-col :span="12">
                    <span>客户端id: {{ card.deviceClientId }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>当前状态:  <el-tag v-if="isOnline(card.deviceClientId)" type="success">在线</el-tag>
                                    <el-tag v-else type="info">离线</el-tag>
                    </span>
                  </el-col>
                </el-row>

                <el-row style="font-size: 14px; margin-top: 10px;" :gutter="24">
                  <el-col :span="24">
                    <span>连接时间: {{ card.lastConnectionTime == null ? '- - -' : card.lastConnectionTime }}</span>
                  </el-col>
                </el-row>
                <el-row style="font-size: 14px; margin-top: 10px; " :gutter="24">
                  <el-col :span="24">
                    <span>离线时间: {{
                        card.lastDisconnectionTime == null ? '- - -' : card.lastDisconnectionTime
                      }}</span>
                  </el-col>
                </el-row>


                <el-row style="font-size: 14px; margin-top: 10px; " :gutter="24">
                  <el-col :span="24">
                    <span style="white-space: pre-line">备注: <br/> </span>
                    <div style="height: 50px ;overflow-y: auto">
                      {{card.remark}}

                    </div>
                  </el-col>
                </el-row>

                <el-button           @click="handleSendMsg(card)"
                                      round
                           style=" float: right; margin: 10px 5px;" type="primary">推送消息
                </el-button>

              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>
    </el-checkbox-group>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="组ID" prop="groupId">
          <el-select :disabled="form.deviceId!=null"
                     v-model="form.groupId"
                     clearable

                     filterable
                     remote
                     reserve-keyword
                     placeholder="请输入关键词"
                     :remote-method="remoteGroupList"
                     :loading="loading">
            <el-option
              v-for="item in groupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="client_id" prop="deviceClientId">
          <el-input v-model="form.deviceClientId" placeholder="请输入client_id"/>
        </el-form-item>
        <el-form-item label="设备名" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名"/>
        </el-form-item>


        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>


        <el-divider content-position="center">关联主题</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddContacts">添加
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteContacts">删除
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="form.iotDevicesTopicList" :row-class-name="rowContactsIndex"
                  @selection-change="handleContactsSelectionChange" ref="Contacts"
        >
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="序号" type="index" align="center" width="50"/>

          <el-table-column label="主题" width="220">
            <template slot-scope="scope">
              <el-select v-model="scope.row.topicId" filterable placeholder="请选择">
                <el-option
                  v-for="item in topicOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </template>
          </el-table-column>


          <el-table-column label="权限类型" width="190">

            <template slot-scope="scope">
              <el-select
                v-model="scope.row.action" placeholder="请选择权限类型">
                <el-option
                  v-for="dict in dict.type.acl_action"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>

            </template>
          </el-table-column>

          <el-table-column label="权限" width="140">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.permission" placeholder="请选择权限">
                <el-option
                  :key="true"
                  label="允许"
                  :value="true"
                ></el-option>
                <el-option
                  :key="false"
                  label="禁止"
                  :value="false"
                ></el-option>
              </el-select>

            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="消息推送"  :visible.sync="dialogFormVisible">
      <el-form ref="mqttMsg" width="500px" :model="mqttMsg" :rules="mqttMsgRules">
        <el-form-item label="消息内容" prop="content" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="mqttMsg.content"></el-input>
        </el-form-item>
        <el-form-item label="是否保留消息" :label-width="formLabelWidth" prop="retained">
          <el-select  style="width: 100%" v-model="mqttMsg.retained" placeholder="请选择是否为保留消息">
            <el-option label="保留消息（设备即使不在线，上线后也会接收到此消息，但是保留消息只能有一条）" :value="true"></el-option>
            <el-option label="普通消息（设备不在线时推送是无效的）" :value="false"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mqttMsgCancel">取 消</el-button>
        <el-button type="primary" @click="submitMsgForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  sendMsg,
  getClients,
  topicList,
  groupList,
  listDevices,
  getDevices,
  delDevices,
  addDevices,
  updateDevices
} from "@/api/emqx/devices";

export default {
  name: "Devices",
  dicts: ['sys_normal_disable', 'acl_action'],
  data() {
    return {
      formLabelWidth: '120px',
      intervalId: null,
      emqxClients: [],
      //字表选中数据
      checkedContacts: [],
      groupOptions: [],
      topicOptions: [],
      checkAll: false,
      checked: [],
      // 遮罩层
      loading: true,
      //推送消息弹窗
      dialogFormVisible: false,
      mqttMsg: {
        deviceIds:null,
        content: null,
        retained: false,
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      devicesList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      daterangeLastConnectionTime: [],
      daterangeLastDisconnectionTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceClientId: null,
        deviceName: null,
        lastConnectionTime: null,
        groupId: null,
        status: null,
        lastDisconnectionTime: null,
      },
      // 表单参数
      form: {iotDevicesTopicList: []},
      // 表单校验
      rules: {
        deviceClientId: [
          {required: true, message: "client_id不能为空", trigger: "blur"}
        ],
        deviceName: [
          {required: true, message: "设备名不能为空", trigger: "blur"}
        ],
        groupId: [
          {required: true, message: "设备组id不能为空", trigger: "blur"}
        ],
        status: [
          {required: true, message: "状态不能为空", trigger: "change"}
        ],
      },
      mqttMsgRules: {
        content: [
          {required: true, message: "消息内容不能为空", trigger: "blur"},
        ],
        retained: [
          {required: true, message: "是否保留消息不能为空", trigger: "blur"},
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    //挂载后开始轮询
    //this.startPolling();

  },
  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  methods: {
    isOnline(deviceClientId) {
      for (let i = 0; i < this.emqxClients.length; i++) {
        console.log(this.emqxClients[i].connected);
        if (this.emqxClients[i].clientid === deviceClientId && this.emqxClients[i].connected) {
          return true;
        }
      }
      return false;
    },
    polling() {
      if (this.devicesList.length > 0) {
        const clientIds = this.devicesList.map(device => device.deviceClientId);
        getClients(1, clientIds.length, clientIds).then(response => {
          this.emqxClients = response.data.data;
          console.log(this.emqxClients);
        })

      }
    },
    startPolling() {
      this.polling();
      // 开始轮询，每隔5秒发送一次请求
      this.intervalId = setInterval(this.polling, 5000);
    },
    stopPolling() {
      // 停止轮询
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
    rowContactsIndex({row, rowIndex}) {
      row.index = rowIndex + 1
    },

    handleSendMsg(row) {
      this.dialogFormVisible = true;
      this.mqttMsg.deviceIds = row.deviceId || this.ids;
      //sendMsg(deviceIds, {topic: "topic", content: "content"})
    },
    /** 告警联系人关联添加按钮操作 */
    handleAddContacts() {
      this.getTopicList()
      let obj = {}
      obj.topicId = null
      obj.permission = true
      obj.action = 'all'

      this.form.iotDevicesTopicList.push(obj)
    },
    handleContactsSelectionChange(selection) {
      this.checkedContacts = selection.map(item => item.index)
    },
    /** 告警联系人关联删除按钮操作 */
    handleDeleteContacts() {
      if (this.checkedContacts.length === 0) {
        this.$modal.msgError('请先选择要删除的主题关联数据')
      } else {
        const iotDevicesTopicList = this.form.iotDevicesTopicList
        const checkedContacts = this.checkedContacts
        this.form.iotDevicesTopicList = iotDevicesTopicList.filter(function (item) {
          return checkedContacts.indexOf(item.index) === -1
        })
        this.getTopicList()

      }

    },


    groupedDevicesList() {
      const chunkSize = 4; // 每行显示的话题数
      const result = [];
      for (let i = 0; i < this.devicesList.length; i += chunkSize) {
        result.push(this.devicesList.slice(i, i + chunkSize));
      }
      return result;
    },
    handleCheckAll() {
      this.checked = [];
      this.handleSelectionChange([])
      if (!this.checkAll) {
        this.devicesList.forEach(item => {
          this.checked.push(item.deviceId);
        })
        this.handleSelectionChange(this.devicesList)
      }
      this.checkAll = !this.checkAll;
    },

    handleCheckedChange(value) {
      const arr = [];
      value.forEach((item) => {
        this.devicesList.forEach(device => {
          if (device.deviceId === item) {
            arr.push(device);
          }
        })
      })
      this.handleSelectionChange(arr)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.devicesList.length;
    },
    remoteGroupList(query) {
      if (query !== '') {
        this.loading = true;
        groupList(query).then(res => {
          this.groupOptions = res.data;
          this.loading = false;
        })

      } else {
        this.groupOptions = [];
      }
    },

    getTopicList() {
      this.loading = true;
      topicList().then(res => {
        this.topicOptions = res.data;
        this.topicOptions.forEach((item) => {
          this.form.iotDevicesTopicList.forEach(device => {
            if (device.topicId === item.value) {
              this.$set(item, "disabled", true);
            }
          })
        });
        this.loading = false;
      })

    },
    /** 查询设备管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeLastConnectionTime && '' != this.daterangeLastConnectionTime) {
        this.queryParams.params["beginLastConnectionTime"] = this.daterangeLastConnectionTime[0];
        this.queryParams.params["endLastConnectionTime"] = this.daterangeLastConnectionTime[1];
      }
      if (null != this.daterangeLastDisconnectionTime && '' != this.daterangeLastDisconnectionTime) {
        this.queryParams.params["beginLastDisconnectionTime"] = this.daterangeLastDisconnectionTime[0];
        this.queryParams.params["endLastDisconnectionTime"] = this.daterangeLastDisconnectionTime[1];
      }
      listDevices(this.queryParams).then(response => {
        this.devicesList = response.rows;
        this.total = response.total;
        if (this.total > 0) {
          this.startPolling();
        } else {
          this.stopPolling();
        }
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        deviceId: null,
        deviceClientId: null,
        deviceName: null,
        lastConnectionTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        groupId: null,
        status: '0',
        lastDisconnectionTime: null,
        uid: null,
        iotDevicesTopicList: []

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeLastConnectionTime = [];
      this.daterangeLastDisconnectionTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.deviceId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const deviceId = row.deviceId || this.ids
      this.getTopicList()
      getDevices(deviceId).then(response => {
        this.form = response.data;
        this.remoteGroupList(this.form.groupId)
        this.open = true;
        this.title = "修改设备管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let tag = true;
          this.form.iotDevicesTopicList.forEach(item => {
            if (item.topicId == null || item.permission == null || item.action == null) {
              this.$modal.msgError('主题关联数据不能为空')
              tag = false;
            }
          })
          if (this.form.deviceId != null && tag) {
            updateDevices(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else if (tag) {
            addDevices(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const deviceIds = row.deviceId || this.ids;
      this.$modal.confirm('是否确认删除设备管理编号为"' + deviceIds + '"的数据项？').then(function () {
        return delDevices(deviceIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('emqx/devices/export', {
        ...this.queryParams
      }, `devices_${new Date().getTime()}.xlsx`)
    },
    submitMsgForm() {
      this.$refs["mqttMsg"].validate(valid => {
        if (valid && this.mqttMsg.deviceIds!=null) {
          sendMsg(this.mqttMsg.deviceIds, this.mqttMsg).then(res=>{
            this.$modal.msgSuccess("消息推送成功");
          }).finally(()=>{
            this.mqttMsgCancel()
          })
        }

      });
    },
    mqttMsgCancel(){
      this.dialogFormVisible = false;
      this.mqttMsg.retained = false;
      this.mqttMsg.content=null;
      this.mqttMsg.deviceIds = null;
    }
  }
};
</script>
